import React, {PureComponent} from "react";

// 引入折线
import 'echarts/lib/chart/line';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

import ReactEcharts from "echarts-for-react";

export default class RadarChart extends PureComponent {
  state = {
    option: {}
  }

  gen() {
    return {
      title: {
        text: '雷达图',
        textStyle: {
          color: 'rgba(221,221,221,1)', //标题颜色
          fontSize: 14,
          lineHeight: 20,
        },
        // 标题的位置，此时放在图的底边
        left: 'center',
        top: 'bottom',
      },
      // 图表的位置
      grid: {
        position: 'center',
      },
      tooltip: {
        //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好
        confine: true,
        enterable: true, //鼠标是否可以移动到tooltip区域内
      },
      radar: {
        shape: 'circle',
        splitNumber: 3, // 雷达图圈数设置
        name: {
          textStyle: {
            color: '#838D9E',
          },
        },
        // 设置雷达图中间射线的颜色
        axisLine: {
          lineStyle: {
            color: 'rgba(131,141,158,.1)',
          },
        },
        indicator: [{
          name: '通信', max: 30,
          //若将此属性放在radar下，则每条indicator都会显示圈上的数值，放在这儿，只在通信这条indicator上显示
          axisLabel: {
            show: true,
            fontSize: 12,
            color: '#838D9E',
            showMaxLabel: false, //不显示最大值，即外圈不显示数字30
            showMinLabel: true, //显示最小数字，即中心点显示0
          },
        },
          {name: '零售', max: 30},
          {name: '电力', max: 30},
          {name: '交通', max: 30},
          {name: '食品', max: 30},
          {name: '建筑', max: 30},
          {name: '银行', max: 30},
          {name: '汽车', max: 30},
          {name: '电子工程', max: 30},
        ],
        //雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景
        splitArea: {
          show: false,
          areaStyle: {
            color: 'rgba(255,0,0,0)', // 图表背景的颜色
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: 'rgba(131,141,158,.1)', // 设置网格的颜色
          },
        },
      },
      series: [{
        name: '雷达图', // tooltip中的标题
        type: 'radar', //表示是雷达图
        symbol: 'circle', // 拐点的样式，还可以取值'rect','angle'等
        symbolSize: 8, // 拐点的大小

        areaStyle: {
          normal: {
            width: 1,
            opacity: 0.2,
          },
        },
        data: [
          {
            value: [17, 24, 27, 29, 26, 16, 13, 17, 25],
            name: '2018-07',
            // 设置区域边框和区域的颜色
            itemStyle: {
              normal: {
                color: 'rgba(255,225,0,.3)',
                lineStyle: {
                  color: 'rgba(255,225,0,.3)',
                },
              },
            },
            //在拐点处显示数值
            label: {
              normal: {
                show: true,
                formatter: (params) => {
                  return params.value
                },
              },
            },
          },
          {
            value: [5, 20, 19, 11, 22, 17, 8, 19, 16],
            name: '',
            itemStyle: {
              normal: {
                color: 'rgba(60,135,213,.3)',
                lineStyle: {
                  width: 1,
                  color: 'rgba(60,135,213,.3)',
                },
              },
            },
          },
          {
            value: [7, 18, 19, 13, 22, 17, 8, 25, 9],
            name: '',
            itemStyle: {
              normal: {
                color: 'rgba(255,74,74,.3)',
                lineStyle: {
                  width: 1,
                  color: 'rgba(255,74,74,.3)',
                },
              },
            },
          },
        ],
      }],
    };
  }

  componentDidMount() {

    this.setState({option: this.gen()})
  }


  render() {

    return (<div style={{background:"#37474f"}}><ReactEcharts
      option={this.state.option}
      style={{height: '500px', width: '100%'}}
      className='echarts-for-echarts'
      theme='my_theme'/></div>);
  }
}
